<!-- 考试-->
<template>
    <div class="app-container">
        <el-form :model="form" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="卷名" prop="roleName">
                <el-input v-model="form.paperName" placeholder="请输入库名" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="考试时间">
                <el-col :span="12">
                    <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="开始日期"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
                <el-col :span="12">
                    <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="结束日期"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchTable(form)">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="emptySearch(form)">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="fastGroupPaper">快速组卷</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openDialog">新增</el-button>
            </el-col>
        </el-row>
        <el-col :span="24">
            <el-table :data="tableData" border>
                <el-table-column prop="paperName" label="卷名" align="center"> </el-table-column>
                <el-table-column prop="paperNo" label="编号" align="center"> </el-table-column>
                <el-table-column prop="questionNum" label="总题数" align="center"> </el-table-column>
                <el-table-column prop="examTotalSecond" label="总时长" align="center">
                </el-table-column>
                <el-table-column prop="passMark" label="及格分" align="center"> </el-table-column>
                <el-table-column prop="paperMark" label="备注" align="center"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="queryDetail(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="pushPaper(scope.row)" type="text" size="small">下发考试</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-row>
            <el-col>
                <pagination v-show="form.total > 0" :total="form.total" :page.sync="form.current" :limit.sync="form.size"
                    @pagination="queryPaperList" />
            </el-col>
        </el-row>
        <add-paper ref="dialog"></add-paper>

        <allocation-quetsion ref="pushDialog" :waitPaperName="waitPaperName" :paperId="paperId"
            :examPaperId="examPaperId"></allocation-quetsion>
    </div>
</template>
    
    
<script>
import {
    queryPaperAll,
    delPaper
} from "@/api/onlineQuestion/index.js";
import AddPaper from "./addPaper.vue";
import AllocationQuetsion from "./allocationQuestion.vue";

export default {
    components: { AddPaper, AllocationQuetsion },
    name: "questionBank",
    data() {
        return {
            showSearch: true,
            waitPaperName: "",
            paperId: 0,
            paperName: "",
            dialogTableVisible: false,
            tableData: [],
            params: {},
            total: 1,
            examPaperId: 0,
            form: {
                paperName: "",
                startDate: "",
                endDate: "",
                current: 1,
                size: 10,
                total: 0
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
        };
    },
    computed: {},
    created() {
        this.queryPaperList();
    },
    mounted() { },
    methods: {
        del(row){
            delPaper({
                examPaperId:row.examPaperId
            }).then(res=>{
                this.$message(res.msg)
                this. queryPaperList(); 
            })
        },
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.form.current = val;
            //刷新表格
            this.queryPaperList();
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.form.size = val;
            //刷新表格
            this.queryPaperList();
        },
        //获取试卷列表
        queryPaperList() {
            queryPaperAll(JSON.stringify(this.form)).then((res) => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                }
            });
        },
        //获取题库试题
        searchTable(formData) {
            this.queryPaperList();
        },
        //重置搜索框
        emptySearch(form) {
            form.paperName = "";
            form.startDate = "";
            form.endDate = "";
        },
        openDialog() {
            this.$refs.dialog.show();
        },
        //下发考试
        pushPaper(row) {
            this.waitPaperName = row.paperName;
            this.examPaperId = row.examPaperId;
            //打开下发页面
            this.$refs.pushDialog.show();
        },
        //详情
        queryDetail(row) {

        },
        //快速组卷
        fastGroupPaper() {
            this.$router.push({ name: 'FastGroupPaper' })
        },
    },
};
</script>>
    
<style>
.box {
    height: calc(100vh - 120px);
    font-size: 14px;
    line-height: 28px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-bottom: 10px;
    border-bottom: #eee 1px dotted;
}

.tags span {
    margin-right: 10px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: hwb(210 95% 5%);
}

.bg-purple {
    border: 0px solid cornflowerblue;
    height: 200px;
}

.app-container {
    height: 100%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}
</style>
    